<template>
  <div>
    <el-form
      class="login-form"
      status-icon
      :rules="loginRules"
      ref="loginForm"
      :model="loginForm"
      label-width="0"
    >
      <!-- <el-form-item v-if="tenantMode" prop="tenantId">
      <el-input size="small"
                @keyup.enter.native="handleLogin"
                v-model="loginForm.tenantId"
                auto-complete="off"
                :placeholder="$t('login.tenantId')">
        <i slot="prefix"
           class="icon-quanxian"></i>
      </el-input>
      </el-form-item>-->
      <el-form-item prop="username">
        <el-input
          size="small"
          @keyup.enter.native="handleLogin"
          v-model="loginForm.username"
          auto-complete="off"
          :placeholder="$t('login.username')"
        >
          <i slot="prefix" class="icon-yonghu"></i>
        </el-input>
      </el-form-item>
      <el-form-item prop="password">
        <el-input
          size="small"
          @keyup.enter.native="handleLogin"
          :type="passwordType"
          v-model="loginForm.password"
          auto-complete="off"
          :placeholder="$t('login.password')"
        >
          <i class="icon iconfont el-icon-ia-yincangmima" slot="suffix" @click="showPassword"></i>
 <i slot="prefix" class="icon-mima"></i>
        </el-input>
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          size="small"
          @click.native.prevent="handleLogin"
          class="login-submit"
        >{{$t('login.submit')}}</el-button>
      </el-form-item>
    </el-form>
    <el-dialog title="修改密码" :close-on-click-modal="false" :visible.sync="dialogVisible" width="30%" :modal-append-to-body='false'>
      <el-form ref="passwordForm" :model="passwordForm" :rules="rules" label-width="100px">
        <el-form-item label="原密码" prop="oldPassword">
          <el-input typ="password" v-model="passwordForm.oldPassword" show-password></el-input>
        </el-form-item>
        <el-form-item label="新密码" prop="newPassword">
          <el-input typ="password" v-model="passwordForm.newPassword" show-password></el-input>
        </el-form-item>
        <el-form-item label="确认密码" prop="newPassword1">
          <el-input typ="password" v-model="passwordForm.newPassword1" show-password></el-input>
        </el-form-item>
        <el-form-item>
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="changePassword('form')">确 定</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import website from "@/config/website";
import { updatePassword } from "@/api/system/user";

export default {
  name: "userlogin",
  data() {
    return {
      dialogVisible: false,
      account: "",
      passwordForm: {
        oldPassword: "",
        newPassword: "",
        newPassword1: "",
        account: ""
      },
      rules: {
        oldPassword: [
          { required: true, message: "请输入原密码", trigger: "blur" }
        ],
        newPassword: [
          { required: true, message: "请输入新密码", trigger: "blur" },
          { pattern: /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{8,20}$/, message: "密码必须为8位数字+字母，且不可使用空格！", trigger: "blur" }
        ],
        newPassword1: [
          { required: true, message: "请输入重复密码", trigger: "blur" }
        ]
      },
      tenantMode: website.tenantMode,
      loginForm: {
        tenantId: "000000",
        username: "",
        password: "",
        type: "account"
      },
      loginRules: {
        tenantId: [
          { required: false, message: "请输入租户ID", trigger: "blur" }
        ],
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" }
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          { min: 6, message: "密码长度最少为6位", trigger: "blur" }
        ]
      },

      passwordType: "password"
    };
  },
  created() {
   
  },
  mounted() {},
  computed: {
    ...mapGetters(["tagWel"])
  },
  props: [],
  methods: {
    changePassword() {
      this.$refs.passwordForm.validate(valid => {
        if (valid) {
          updatePassword(
            this.passwordForm.oldPassword,
            this.passwordForm.newPassword,
            this.passwordForm.newPassword1,
            this.passwordForm.account = this.account
          ).then(res => {
            if (res.data.success) {
              this.$message({
                type: "success",
                message: "修改密码成功!"
              });
              this.$store.dispatch("LogOut").then(() => {
                this.dialogVisible = false;
              });
            } else {
              this.$message({
                type: "error",
                message: res.data.msg
              });
            }
          });
        }
      });
    },
    showPassword() {
      this.passwordType == ""
        ? (this.passwordType = "password")
        : (this.passwordType = "");
    },
    handleLogin() {
      this.$refs.loginForm.validate(valid => {
        if (valid) {
          const loading = this.$loading({
            lock: true,
            text: "登录中,请稍后。。。",
            spinner: "el-icon-loading"
          });
          this.$store
            .dispatch("LoginByUsername", this.loginForm)
            .then(res => {
              loading.close();
              if (res.data.data && res.data.data && res.data.data.isUpdPwd) {
                this.account = res.data.data.account;
                this.$store.dispatch("LogOut").then(() => {
                  this.dialogVisible = true;
                });
              } else {
                this.$router.push({ path: this.tagWel.value });
              }
            })
            .catch(() => {
              loading.close();
            });
        }
      });
    }
  }
};
</script>

<style>
.dialog-footer {
  height: 100px;
  width: 100%;
  padding-right: 20px;
}
</style>
